<template>
  <a-modal title="选择已有数据" width="900px" v-model:visible="open" @ok="handleConnect" @cancel="hideModal">
    <div class="table-header" style="margin-bottom: 20px">
      <a-input v-model:value="keyWord" placeholder="请输入数据名称" style="width: 300px; margin-right: 20px" />
      <a-button type="primary" @click="getData">搜索</a-button>
    </div>
    <a-table :columns="columns" :dataSource="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange" :scroll="{ y: 300 }">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'createTime'">
          <text>{{ formatDate(record.createTime) }}</text>
        </template>
        <template v-if="column.dataIndex === 'action'">
          <a @click="onRelevance(record)" v-if="!isConnect(record)">添加</a>
          <a @click="onRelevance(record)" v-else>已添加</a>
        </template>
      </template>
    </a-table>
  </a-modal>
</template>
<script lang="ts" setup>
  import message from 'ant-design-vue/es/message'
  import { onMounted, reactive, ref } from 'vue'

  import { requestPassedParticipateDatas } from '/@/api/business/datamarket/customerDataRecord'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'
  import { formatBytes } from '/@/utils'
  import { formatDate } from '/@/utils/date'

  interface IProps {
    selectList: PassedParticipateDatasTypes.IResponse[]
  }

  /* 父组件参数 */
  const props = defineProps<IProps>()
  const emit = defineEmits<{
    (event: 'getSelectList', list: PassedParticipateDatasTypes.IResponse[]): void
  }>()

  const columns = [
    { title: '数据名称', dataIndex: 'fileName' },
    { title: '数据类型', dataIndex: 'fileType', width: 100 },
    { title: '数据大小', dataIndex: 'fileSize', customRender: ({ value }) => formatBytes(value), width: 100 },
    { title: '上传日期', dataIndex: 'createdTime', customRender: ({ value }) => value ?? '--', width: 200 },
    { title: '操作', dataIndex: 'action', width: 100 },
  ]

  const open = ref<boolean>(false)
  const keyWord = ref<string>()
  const relevanceList = ref<PassedParticipateDatasTypes.IResponse[]>([])

  /** 查询条件 */
  const searchParam = reactive({})

  /** 表格分页hook */
  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<PassedParticipateDatasTypes.IRequest, PassedParticipateDatasTypes.IResponse[]>(searchParam, requestPassedParticipateDatas)

  /**
   * 关联
   * @param record 数据行
   */
  const onRelevance = (record: PassedParticipateDatasTypes.IResponse) => {
    const _index = relevanceList.value.findIndex((item) => item.fileId === record.fileId)
    if (_index > -1) {
      relevanceList.value.splice(_index, 1)
    } else {
      relevanceList.value.push({
        fileId: record.fileId,
        fileName: record.fileName,
        fileType: record.fileType,
        fileSize: record.fileSize,
        fileUrl: record.fileUrl,
        createdTime: record.createdTime,
      })
    }
  }

  /**
   * 打开弹窗
   */
  const showModal = () => {
    open.value = true
    if (props.selectList && props.selectList.length) {
      relevanceList.value = JSON.parse(JSON.stringify(props.selectList))
    } else {
      relevanceList.value = []
    }
  }

  /**
   * 关闭弹窗
   */
  const hideModal = () => {
    open.value = false
    relevanceList.value = []
  }

  const handleConnect = () => {
    emit('getSelectList', relevanceList.value)
    hideModal()
  }

  const isConnect = (record: PassedParticipateDatasTypes.IResponse) => {
    if (relevanceList.value.findIndex((item) => item.fileId === record.fileId) > -1) {
      return true
    } else {
      return false
    }
  }

  /**
   * 获取数据
   */
  const getData = async () => queryList()

  onMounted(() => {
    relevanceList.value = props.selectList
  })

  defineExpose({
    showModal,
    getData,
  })
</script>

<style lang="less" scoped></style>
